import React, { ReactNode } from 'react';
import { Form, Select } from 'antd';
import { ObjectType } from '@/pages/riskControl/utils';

const { Option } = Select;

export function BaseSelect({
  getFieldDecorator,
  id,
  label,
  placeholder = '请选择',
  labelCol,
  wrapperCol,
  className,
  OptionKeyAttr,
  OptionValueAttr,
  OptionTextAttr,
  onChange,
  optionsData,
  allowClear = true,
  showArrow = true,
  disabled = false,
  initialValue,
  maxTagTextLength,
  maxTagCount,
  mode,
  style,
}: ObjectType): ReactNode {
  return (
    <Form.Item label={label} labelCol={labelCol} wrapperCol={wrapperCol}>
      {getFieldDecorator(id, {
        initialValue,
      })(
        <Select
          onChange={onChange}
          placeholder={placeholder}
          className={className}
          allowClear={allowClear}
          showArrow={showArrow}
          disabled={disabled}
          mode={mode}
          maxTagTextLength={maxTagTextLength}
          maxTagCount={maxTagCount}
          style={style}
        >
          {optionsData.map((val: ObjectType) => (
            <Option key={val[OptionKeyAttr]} value={val[OptionValueAttr]}>
              {val[OptionTextAttr]}
            </Option>
          ))}
        </Select>,
      )}
    </Form.Item>
  );
}
